<template>
	<view class="customBar">
		<view class="customBar_item" v-for="(item,index) in data" :key="index">
			<view class="text">
				<view v-if="sort" class="index"
					:style="`background:${barStyle?.background};border-color:${barStyle?.color}`">{{index}}</view>
				{{item.name}}
			</view>
			<view class="warp">
				<view class="progress" :style="`background:${barStyle?.background};width:${item?.value}%`">

				</view>
				<view class="tag" :style="`color:${barStyle?.color}`">
					{{item.value}}
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		name: "customBar",
		props: {
			data: {
				type: Array,
				default: () => []
			},
			barStyle: {
				type: Object,
				default: () => {}
			},
			sort: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style scoped>
	.customBar {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 4rpx 12rpx 30rpx;
	}

	.customBar_item {
		margin-top: 26rpx;
	}

	.customBar_item .text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #000000;
		line-height: 30rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.customBar_item .text .index {
		display: inline-block;
		margin-right: 8rpx;
		width: 34rpx;
		height: 34rpx;
		background: rgba(255, 119, 52, 0.5);
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		border: 2rpx solid #FF7734;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.customBar_item .progress {
		margin-top: 16rpx;
		width: calc(100% - 60rpx);
		height: 22rpx;
		/* background: linear-gradient(311deg, #FF1010 0%, #FFD3D3 100%); */
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}


	.customBar_item .warp {
		width: calc(100%);
		height: 22rpx;
		display: flex;
		flex-direction: row;
		justify-content: start;
	}

	.customBar_item .tag {
		margin-top: 10rpx;
		margin-left: 12rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		/* line-height: 28rpx; */
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
</style>